<!DOCTYPE html>
<html lang="zh">

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" />
    <title>初心博客后台管理系统</title>
    <link rel="icon" href="favicon.ico" type="image/ico">
    <meta name="keywords" content="LightYear,光年,后台模板,后台管理系统,光年HTML模板">
    <meta name="description" content="LightYear是一个基于Bootstrap v3.3.7的后台管理系统的HTML模板。">
    <meta name="author" content="yinqi">
    <link href="/plugins/bootstrap/css/bootstrap.css" rel="stylesheet">
    <link href="/css/materialdesignicons.min.css" rel="stylesheet">
    <link href="/css/admin.css" rel="stylesheet">
</head>

<body>
    <div class="lyear-layout-web">
        <div class="lyear-layout-container">
            <!--左侧导航-->
            <% include sliderBar%>
                <!--End 左侧导航-->

                <!--头部信息-->
                <% include headerBar%>
                    <!--End 头部信息-->

                    <!--页面主要内容-->
                    <main class="lyear-layout-content">

                        <div class="container-fluid">

                            <div class="row">
                                <div class="col-sm-6 col-lg-3">
                                    <div class="card bg-primary">
                                        <div class="card-body clearfix">
                                            <div class="pull-right">
                                                <p class="h6 text-white m-t-0">文章总数</p>
                                                <p class="h3 text-white m-b-0">11,152.0</p>
                                            </div>
                                            <div class="pull-left"> <span class="img-avatar img-avatar-48 bg-translucent"><i class="mdi mdi-currency-cny fa-1-5x"></i></span> </div>
                                        </div>
                                    </div>
                                </div>

                                <div class="col-sm-6 col-lg-3">
                                    <div class="card bg-danger">
                                        <div class="card-body clearfix">
                                            <div class="pull-right">
                                                <p class="h6 text-white m-t-0">用户总数</p>
                                                <p class="h3 text-white m-b-0">920,000</p>
                                            </div>
                                            <div class="pull-left"> <span class="img-avatar img-avatar-48 bg-translucent"><i class="mdi mdi-account fa-1-5x"></i></span> </div>
                                        </div>
                                    </div>
                                </div>

                                <div class="col-sm-6 col-lg-3">
                                    <div class="card bg-success">
                                        <div class="card-body clearfix">
                                            <div class="pull-right">
                                                <p class="h6 text-white m-t-0">访问总数</p>
                                                <p class="h3 text-white m-b-0">34,005,000</p>
                                            </div>
                                            <div class="pull-left"> <span class="img-avatar img-avatar-48 bg-translucent"><i class="mdi mdi-arrow-down-bold fa-1-5x"></i></span> </div>
                                        </div>
                                    </div>
                                </div>

                                <div class="col-sm-6 col-lg-3">
                                    <div class="card bg-purple">
                                        <div class="card-body clearfix">
                                            <div class="pull-right">
                                                <p class="h6 text-white m-t-0">新增留言</p>
                                                <p class="h3 text-white m-b-0">153 条</p>
                                            </div>
                                            <div class="pull-left"> <span class="img-avatar img-avatar-48 bg-translucent"><i class="mdi mdi-comment-outline fa-1-5x"></i></span> </div>
                                        </div>
                                    </div>
                                </div>
                            </div>

                            <div class="row">

                                <div class="col-lg-6">
                                    <div class="card">
                                        <div class="card-header">
                                            <h4>每周用户</h4>
                                        </div>
                                        <div class="card-body">
                                            <canvas class="js-chartjs-bars"></canvas>
                                        </div>
                                    </div>
                                </div>

                                <div class="col-lg-6">
                                    <div class="card">
                                        <div class="card-header">
                                            <h4>访问记录</h4>
                                        </div>
                                        <div class="card-body">
                                            <canvas class="js-chartjs-lines"></canvas>
                                        </div>
                                    </div>
                                </div>

                            </div>

                            <div class="row">

                                <div class="col-lg-12">
                                    <div class="card">
                                        <div class="card-header">
                                            <h4>最新文章</h4>
                                        </div>


                                        <div class="card-body">
                                            <div class="table-responsive">
                                                <table class="table table-bordered">
                                                    <thead>
                                                        <tr>
                                                            <th>编号</th>
                                                            <th>文章名称</th>
                                                            <th>文章分类</th>
                                                            <th>状态</th>
                                                            <th>发布者</th>
                                                            <th>创建时间</th>
                                                            <th>操作</th>
                                                        </tr>
                                                    </thead>
                                                    <tbody>
                                                        <% newlist.forEach(function(news,index){%>
                                                            <tr>
                                                                <td>
                                                                    <%= index+1 %>
                                                                </td>
                                                                <td>
                                                                    <%= news.articalName %>
                                                                </td>
                                                                <td>
                                                                    <%= news.className %>
                                                                </td>
                                                                <td>
                                                                    <% if(news.status) { %>
                                                                        <font class="text-success">正常</font>
                                                                        <% }else{ %>
                                                                            <font class="text-danger">禁用</font>
                                                                            <% }%>

                                                                </td>
                                                                <td>
                                                                    <%=news.userName %>
                                                                </td>
                                                                <td>
                                                                    <%=news.updateTime %>
                                                                </td>
                                                                <td>
                                                                    <div class="btn-group">
                                                                        <a class="btn btn-xs btn-default" href="#!" title="" data-toggle="tooltip" data-original-title="编辑"><i class="mdi mdi-pencil"></i></a>
                                                                        <a class="btn btn-xs btn-default" href="#!" title="" data-toggle="tooltip" data-original-title="删除"><i class="mdi mdi-window-close"></i></a>
                                                                    </div>
                                                                </td>
                                                            </tr>

                                                            <%})%>
                                                    </tbody>
                                                </table>
                                            </div>
                                        </div>
                                    </div>
                                </div>

                            </div>

                        </div>

                    </main>
                    <!--End 页面主要内容-->
        </div>
    </div>

    <script type="text/javascript" src="/plugins/jquery/jquery-3.4.0.min.js"></script>
    <script type="text/javascript" src="/plugins/bootstrap/js/bootstrap.min.js"></script>
    <script type="text/javascript" src="/js/perfect-scrollbar.min.js"></script>
    <script type="text/javascript" src="/js/main.min.js"></script>

    <!--图表插件-->
    <script type="text/javascript" src="/js/Chart.js"></script>
    <script type="text/javascript">
        $(document).ready(function(e) {
            var $dashChartBarsCnt = jQuery('.js-chartjs-bars')[0].getContext('2d'),
                $dashChartLinesCnt = jQuery('.js-chartjs-lines')[0].getContext('2d');

            var $dashChartBarsData = {
                labels: ['周一', '周二', '周三', '周四', '周五', '周六', '周日'],
                datasets: [{
                    label: '注册用户',
                    borderWidth: 1,
                    borderColor: 'rgba(0,0,0,0)',
                    backgroundColor: 'rgba(51,202,185,0.5)',
                    hoverBackgroundColor: "rgba(51,202,185,0.7)",
                    hoverBorderColor: "rgba(0,0,0,0)",
                    data: [2500, 1500, 1200, 3200, 4800, 3500, 1500]
                }]
            };
            var $dashChartLinesData = {
                labels: ['2003', '2004', '2005', '2006', '2007', '2008', '2009', '2010', '2011', '2012', '2013', '2014'],
                datasets: [{
                    label: '访问记录',
                    data: [20, 25, 40, 30, 45, 40, 55, 40, 48, 40, 42, 50],
                    borderColor: '#358ed7',
                    backgroundColor: 'rgba(53, 142, 215, 0.175)',
                    borderWidth: 1,
                    fill: false,
                    lineTension: 0.5
                }]
            };

            new Chart($dashChartBarsCnt, {
                type: 'bar',
                data: $dashChartBarsData
            });

            var myLineChart = new Chart($dashChartLinesCnt, {
                type: 'line',
                data: $dashChartLinesData,
            });
        });
    </script>
</body>

</html>